<template>
    <div class="analysisTopic">

      <div class="analysisTopic-title">
        <div class="title-left">
          <span class="title-main">第{{index}}题</span>
          <span class="title-flag">{{typeText}}</span>
        </div>
        <div class="title-right">
          <div class="title-right-col">
            <num-info-box-small main="139.5" size="small" assist="150" title="最高分"></num-info-box-small>
          </div>
          <div class="title-right-col">
            <num-info-box-small main="3.5" size="small" assist="4" title="平均分"></num-info-box-small>
          </div>
        </div>
      </div>

      <div class="analysisTopic-content" v-show="Collapse">
          <div class="analysisTopic-main">
            <div class="analysisTopic-main-row">
            <span class="main-row-title">
              题目:
            </span>
              <span class="main-row-text">
              {{topic.title}}
            </span>
            </div>
            <div :key="item.text" class="analysisTopic-main-row" v-for="item in topic.list">
                <span class="main-row-title">
                  {{item.flag}}.
                </span>
                  <span class="main-row-text">
                  {{item.text}}
                </span>
            </div>
            <div class="analysisTopic-main-row row_answer">
            <span class="main-row-title">
                正确答案:
            </span>
              <span class="main-row-text">
               {{topic.answer}}
            </span>
            </div>
          </div>

          <div class="analysisTopic-chart">
            <columnChart :id="chartid"/>
          </div>
        <div class="analysisTopic-complete">
          <template v-if="type === 1">
            <div  class="analysisTopic-complete-title">
              已完成
              <span class="title-line"></span>
            </div>
            <div  class="analysisTopic-complete-list">
              <div class="analysisTopic-complete-row">
                <div class="row-title">
                  选项A
                </div>
                <div class="row-list">
                  <div class="row-list-item row-list-item_blue">
                    黄乐乐
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    罗晶晶
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    张翔
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    胡星
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    陈伟
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    李欣瑶
                  </div>
                </div>
              </div>
              <div class="analysisTopic-complete-row">
                <div class="row-title">
                  选项B
                </div>
                <div class="row-list">
                  <div class="row-list-item row-list-item_blue">
                    黄乐乐
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    罗晶晶
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    张翔
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    胡星
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    陈伟
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    李欣瑶
                  </div>
                </div>
              </div>
              <div class="analysisTopic-complete-row">
                <div class="row-title">
                  选项C
                </div>
                <div class="row-list">
                  <div class="row-list-item row-list-item_blue">
                    黄乐乐
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    罗晶晶
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    张翔
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    胡星
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    陈伟
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    李欣瑶
                  </div>
                </div>
              </div>
              <div class="analysisTopic-complete-row">
                <div class="row-title">
                  选项D
                </div>
                <div class="row-list">
                  <div class="row-list-item row-list-item_blue">
                    黄乐乐
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    罗晶晶
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    张翔
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    胡星
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    陈伟
                  </div>
                  <div class="row-list-item row-list-item_blue">
                    李欣瑶
                  </div>
                </div>
              </div>
            </div>
          </template>
          <div class="analysisTopic-complete-table" >
            <class-table v-if="type === 1"></class-table>
            <hearing-table v-if="type === 2"></hearing-table>
            <fall-in-blank-table v-if="type === 3"></fall-in-blank-table>
          </div>
        </div>
          <div class="analysisTopic-complete">
            <div class="analysisTopic-complete-title">
              未完成
              <span class="title-line"></span>
            </div>
            <div class="analysisTopic-complete-list">
              <div class="analysisTopic-complete-row">
                <div class="row-list">
                  <div :key="item" v-for="item in uncomplete" class="row-list-item row-list-item_pink">
                    {{item}}
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>

      <div class="analysisTopic-operating">
        <i v-if="!Collapse" class="iconfont icon-xia" @click="handleCollapseChange"></i>
        <i v-else class="iconfont icon-shang" @click="handleCollapseChange"></i>
      </div>
    </div>
</template>

<script>
  import numInfoBoxSmall from '../../components/numInfoBoxSmall'
  import columnChart from './columnChart'
  import classTable from './classTable'
  import hearingTable from './hearingTable'
  import fallInBlankTable from './fallInBlankTable'

  export default {
    name: 'analysisTopic',
    props: {
      index: {
        type: Number,
        default: 1
      },
      type: {
        type: Number,
        default: 1
      },
      topic: {
        type: Object,
        default: {
          title: 'What does the man mean?',
          list: [
            {
              flag: 'A',
              text: 'The woman may ask The woman may ask The woman may ask'
            },
            {
              flag: 'C',
              text: 'The woman can send the mail to Sally'
            },
            {
              flag: 'B',
              text: 'He will inform Linda of the mail'
            }
          ],
          answer: 'C'
        }
      },
      complete: {
        type: Array,
        default: [{
          title: '选项A',
          list: ['黄乐乐', '罗晶晶', '张翔', '胡星', '陈伟', '李欣瑶', '黄乐乐', '张翔', '陈伟', '李欣瑶']
        }, {
          title: '选项B',
          list: ['黄乐乐', '罗晶晶', '张翔', '胡星', '陈伟', '李欣瑶', '黄乐乐', '张翔', '陈伟', '李欣瑶']
        }, {
          title: '选项C',
          list: ['黄乐乐', '罗晶晶', '张翔', '胡星', '陈伟', '李欣瑶', '黄乐乐', '张翔', '陈伟', '李欣瑶']
        }]
      },
      uncomplete: {
        type: Array,
        default: ['黄乐乐', '罗晶晶', '张翔', '胡星', '陈伟', '李欣瑶', '黄乐乐', '张翔', '陈伟', '李欣瑶']
      },
      chartid: {
        type: String,
        default: 'radarChart'
      }
    },
    data () {
      return {
        Collapse: true
      }
    },
    components: {
      fallInBlankTable,
      numInfoBoxSmall,
      columnChart,
      classTable,
      hearingTable
    },
    methods: {
      handleCollapseChange () {
        this.Collapse = !this.Collapse
      }
    },
    mounted () {
      console.log(this.chartid)
    },
    computed: {
      typeText: function () {
        switch (this.type) {
          case 1:
            return '选择题'
          case 2:
            return '口语题'
          case 3:
            return '填空题'
        }
      }
    }
  }
</script>

<style scoped>
  .analysisTopic {
    padding: 40rpx 40rpx 0 40rpx;
    border-top: 2rpx solid rgba(243, 243, 243, 1);
    border-bottom: 14rpx solid rgba(243, 243, 243, 1);
  }

  .analysisTopic-title {
    display: flex;
    height: 80rpx;
    align-items: center;
    justify-content: space-between;
  }

  .title-main {
    font-size: 36rpx;
    font-weight: 600;
  }

  .analysisTopic-main {
    margin-top: 10rpx;
  }

  .title-flag {
    color: rgba(243, 147, 12, 1);
    background: rgba(255, 238, 214, 1);
    padding: 0rpx 16rpx;
    border-radius: 16rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
  }

  .title-right {
    width: 280rpx;
    display: flex;
    justify-content: space-between;
  }

  .analysisTopic-main-row {
    margin-bottom: 10rpx;
  }

  .main-row-title {
    font-size: 32rpx;
    color: rgba(51, 51, 51, 1);
    line-height: 50rpx;
  }

  .main-row-text {
    font-size: 32rpx;
    color: rgba(51, 51, 51, 1);
    line-height: 50rpx;
  }

  .row_answer {
    line-height: 70rpx;
  }

  .analysisTopic-complete {
    margin-bottom: 20rpx;
    position: relative;
  }

  .analysisTopic-complete-title {
    width: 100%;
    font-size: 32rpx;
    color: rgba(24, 25, 26, 1);
    position: relative;
    padding-bottom: 20rpx;
  }

  .title-line {
    position: absolute;
    display: inline-block;
    width: 48rpx;
    height: 4rpx;
    bottom: 16rpx;
    left: 0;
    background: rgba(51, 170, 255, 1);
  }

  .analysisTopic-complete-list {
    width: 100%;
  }

  .analysisTopic-complete-row {
    display: flex;
    margin-bottom: 20rpx;
  }

  .analysisTopic-complete-row .row-title {
    width: 110rpx;
    flex-shrink: 0;
    font-size: 28rpx;
    color: rgba(24, 25, 26, 1);
  }

  .analysisTopic-complete-row .row-list {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }

  .row-list-item {
    padding: 10rpx 28rpx;
    border-radius: 16rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
    margin-bottom: 10rpx;
  }

  .row-list-item_blue {
    color: rgba(97, 100, 102, 1);
    background: rgba(214, 238, 255, 1);
  }

  .row-list-item_pink {
    color: rgba(97, 100, 102, 1);
    background: rgba(255, 214, 214, 1);
  }

  .analysisTopic-operating {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }

  .analysisTopic-chart {
    height: 480rpx;
  }
</style>
